Product
Introducing Ruby Support in Socket
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
@fluentui/dom-utilities
Advanced tools
@fluentui/dom-utilities is a collection of utility functions for DOM manipulation and event handling, designed to be used with Fluent UI components. It provides a set of tools to simplify common tasks such as element positioning, event handling, and DOM traversal.
Event Handling
This feature provides utility functions to add and remove event listeners from DOM elements. It simplifies the process of managing event listeners.
const { addEventListener, removeEventListener } = require('@fluentui/dom-utilities');
const button = document.getElementById('myButton');
function handleClick(event) {
console.log('Button clicked!');
}
addEventListener(button, 'click', handleClick);
// Later, to remove the event listener
removeEventListener(button, 'click', handleClick);
Element Positioning
This feature allows you to get the position and size of a DOM element. It returns an object with properties like top, left, width, and height.
const { getRect } = require('@fluentui/dom-utilities');
const element = document.getElementById('myElement');
const rect = getRect(element);
console.log(`Element position: ${rect.top}, ${rect.left}`);
DOM Traversal
This feature provides a utility function to recursively find a DOM element that matches a given condition. It simplifies the process of searching through the DOM tree.
const { findElementRecursive } = require('@fluentui/dom-utilities');
const rootElement = document.getElementById('root');
const targetElement = findElementRecursive(rootElement, (el) => el.id === 'target');
if (targetElement) {
console.log('Target element found:', targetElement);
} else {
console.log('Target element not found');
}
dom-helpers is a collection of DOM helper functions similar to @fluentui/dom-utilities. It provides utilities for event handling, element positioning, and DOM traversal. It is lightweight and has a similar API, making it a good alternative.
jQuery is a well-known library that provides a wide range of DOM manipulation and event handling utilities. While it is more comprehensive and has a larger footprint than @fluentui/dom-utilities, it offers similar functionalities and is widely used in the industry.
Lodash is a utility library that provides a wide range of functions for common programming tasks, including DOM manipulation. While it is not specifically focused on the DOM, it offers similar utilities for event handling and element positioning.
DOM Utilities for use within Fluent UI React
This package contains extensions for traversing DOM within Fluent components, which should generally be used instead of the native equivalents. Fluent supports the concept of 'layers', which leverage React 'Portals' to project popups and other overlay content over other content. However, since this is not a native DOM concept, this library provides functionality to traverse the DOM in a way which reflects the hierarchy established by the projections.
FAQs
DOM utilities for use within Fluent web components
We found that @fluentui/dom-utilities demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 12 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.